<template>
  <div @click="onClick" @mouseenter="onMouseEnter">
    <component
      :is="config.component"
      v-if="config.component.startsWith('SVG')"
      ref="component"
      class="component"
      :style="getSVGStyle(config.style)"
      :prop-value="config.propValue"
      :element="config"
      :request="config.request"
      :linkage="config.linkage"
    />

    <component
      :is="config.component"
      v-else
      ref="component"
      class="component"
      :style="getStyle(config.style)"
      :prop-value="config.propValue"
      :element="config"
      :request="config.request"
      :linkage="config.linkage"
      @changeData="changeData"
    />
  </div>
</template>

<script>
import { getStyle, getSVGStyle } from '@/utils/style';
import runAnimation from '@/utils/runAnimation';
import { mixins } from '@/utils/events';
import eventBus from '@/utils/eventBus';

export default {
  mixins: [mixins],
  props: {
    config: {
      type: Object,
      required: true,
      default: () => { },
    },
  },
  created() {
    // this.getTitleName();
  },
  mounted() {
    // runAnimation(this.$refs.component.$el, this.config.animations)
  },
  methods: {
    getStyle,
    getSVGStyle,

    changeData(element, data) {
      console.log(element, data);
      console.log(this.config);
      // const findItem = this.componentData.find(item => item.id === element.id)

      this.config.propValue.option.series.data = data

      this.config.propValue.option.xAxis.data = data.map(item => item.name)
    },

    // getTitleName() {
    // console.log(this.config.propValue.option.title.text);
    // console.log(this.validLowerCase(this.config.propValue.option.title.text));
    // if (this.validLowerCase(this.config.propValue.option.title.text)) {
    // this.config.propValue.option.title.text = this.$t(`${this.config.propValue.option.title.text}`);
    // }
    // },

    validLowerCase(str) {
      const reg = /^[a-z]+$/;
      return reg.test(str);
    },

    onClick() {
      const { events } = this.config;
      Object.keys(events).forEach((event) => {
        this[event](events[event]);
      });

      eventBus.$emit('v-click', this.config.id);
    },

    onMouseEnter() {
      eventBus.$emit('v-hover', this.config.id);
    },
  },
};
</script>

<style lang="scss" scoped>
.component {
  position: absolute;
}
</style>
